import { Auths, Role } from '@/utils/types.d';
import { useModel } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-components';
import { queryCompanies } from '../../SystemUser/service';
import CreateToller from './components/CreateToller';
import type { TollCollectorTableItem } from './types';
import { ProTable } from '@ant-design/pro-components';
import { queryTollCollectors, removeTollCollector } from './service';
import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import ConfirmModal from '@/components/ConfirmModal';
import UpdateToller from './components/UpdateToller';
import ConfigSchedule from './components/ConfigSchedule';
import { useState } from 'react';

export default () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const auths = currUser?.auth ? new Set(currUser.auth.tollCollector || []) : new Set();
  const scheduleAuth = currUser?.auth ? new Set(currUser.auth.scheduleManagement || []) : new Set();
  const ifDelete = auths.has(Auths.DELETE);
  const ifModify = auths.has(Auths.MODIFY);
  const ifCreate = auths.has(Auths.CREATE);
  const ifSchedule = scheduleAuth.has(Auths.CREATE);
  const [currStaff, setCurrStaff] = useState<TollCollectorTableItem>();
  const [configVisible, setConfigVisible] = useState<boolean>(false);
  const columns: ProColumns<TollCollectorTableItem>[] = [
    {
      title: 'id',
      hideInTable: true,
      hideInSearch: true,
      dataIndex: '_id',
      width: 80,
    },
    {
      title: '所属用户',
      dataIndex: 'ownerId',
      width: 80,
      hideInForm: true,
      hideInTable: currUser?.role !== Role.ADMIN,
      hideInSearch: currUser?.role !== Role.ADMIN,
      fieldProps: { showSearch: true },
      render: (_, record) => record.ownerInfo?.ownerName,
      debounceTime: 300,
      request: (val) => queryCompanies(val.keyWords),
    },
    {
      title: '员工编号',
      dataIndex: 'jobNo',
      hideInForm: true,
      align: 'center',
      width: 80,
    },
    {
      title: '员工姓名',
      dataIndex: 'name',
      hideInForm: true,
      width: 80,
      align: 'center',
    },
    // {
    //   title: '执勤路段',
    //   dataIndex: 'parkingLots',
    //   hideInForm: true,
    //   align: 'center',
    //   ellipsis: true,
    //   width: 240,
    //   render: (_, record) => record.parkingLots?.map((item) => item.parkingLotName).join('、'),
    //   fieldProps: { showSearch: true },
    //   request: (val) => queryParkinglotNames(val.keyWords),
    // },
    {
      title: '员工账号',
      dataIndex: 'account',
      align: 'center',
      hideInForm: true,
      width: 80,
    },
    {
      title: '身份证号',
      dataIndex: 'identificationNumber',
      hideInForm: true,
      hideInTable: true,
      width: 80,
      align: 'center',
    },
    {
      title: '手机号码',
      dataIndex: 'phoneNumber',
      hideInForm: true,
      width: 120,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
      width: 140,
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      // fixed: 'right',
      width: 80,
      valueType: 'option',
      render: (_, record, x, action) =>
        ifModify || ifDelete || ifSchedule
          ? [
              ifSchedule && (
                <a
                  onClick={() => {
                    setCurrStaff(record);
                    setConfigVisible(true);
                  }}
                >
                  排班
                </a>
              ),
              ifModify && <UpdateToller reload={() => action?.reload()} toller={record} />,
              ifDelete && (
                <ConfirmModal
                  reload={() => action?.reload()}
                  operFunc={async () => await removeTollCollector(record._id)}
                  text={`是否确定删除收费人员(${record.jobNo} - ${record.name})`}
                />
              ),
            ]
          : [<PlaceHolderCpn key={record._id} />],
    },
  ];
  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '收费人员管理列表',
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/staff',
              breadcrumbName: '员工管理',
            },
            {
              path: '/staff/toll-collector',
              breadcrumbName: '收费人员',
            },
          ],
        },
      }}
    >
      <ProTable<TollCollectorTableItem>
        style={{ whiteSpace: 'nowrap' }}
        columns={columns}
        search={{
          labelWidth: 'auto',
        }}
        rowKey="_id"
        columnEmptyText="暂无数据"
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryTollCollectors(param, sort);
          return res;
        }}
        dateFormatter="string"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        toolBarRender={(action) => [ifCreate && <CreateToller reload={() => action?.reload()} />]}
      />
      {ifSchedule && configVisible && currStaff && (
        <ConfigSchedule
          staffInfo={currStaff}
          calendarVisible={configVisible}
          close={() => {
            setConfigVisible(false);
            setCurrStaff(undefined);
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};
